<template>
    <el-dialog v-model="isShow" title="修改我的户型" width="60%" @open="getMyUpdateInfo" @close="closeDialog">
        <div class="mainSty">
            <div class="main_con_sty">
                <div class="con_tit flex_str">
                    <div class="up_tit_sty"><span style="color:red">*</span> 定位: </div>
                    <div class="up_ipt_sty">
                        <el-cascader v-model="city" :options="cityData" :props="propsLabel" @change="handleChange"
                            :placeholder="city_address" />
                    </div>
                    <div class="up_tit_sty"><span style="color:red">*</span>小区名: </div>
                    <el-input style="margin-right: 30px;" class="up_ipt_sty" v-model="houseParams.communityName"></el-input>
                    <div class="up_tit_sty"><span style="color:red">*</span>备案名: </div>
                    <el-input class="up_ipt_sty" placeholder="可与小区名相同" v-model="houseParams.recordName"></el-input>
                </div>

                <div class="con_tit flex_str">
                    <div class="up_tit_sty"><span style="color:red">*</span>建筑面积: </div>
                    <el-input class="up_ipt_sty" type="number" v-model="houseParams.constructionArea"></el-input>
                    <div class="up_tit_sty"><span style="color:red">*</span>楼栋号: </div>
                    <el-input class="up_ipt_sty" placeholder="不清楚可填：未知" v-model="houseParams.buildingNo"></el-input>
                </div>

                <div class="con_tab_sty flex_str">
                    <div v-for="(item, index) in conTabList" :key="index" @click="conTabClick(item.id)"
                        :style="conTabId == item.id ? 'color: #E21C20;border-bottom: 2px solid #E21C20;' : 'border-bottom: 2px solid #fff;'">
                        {{ item.name }}
                    </div>
                    <!-- <div class="saveBtnSty">全部保存</div> -->
                </div>
                <!-- --原始框架cad start -- -->
                <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 1">
                    <div class="imgNameSty">
                        <div><span style="color: #E21C20;">*</span>上传原始框架图片：</div>
                        <div class="txtSty">支持多选,最多上传8张图片</div>
                        <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                    </div>
                    <div>
                        <el-upload :on-preview="handlePictureCardPreview" action="" v-model:file-list="yskjfileList"
                            list-type="picture-card" :http-request="yskjUpdate" :multiple="true" limit="8"
                            :on-remove="yskjRemoveImg">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>

                <div class="flex_str" style="margin-top: 50px;margin-bottom: 40px;" v-show="conTabId == 1">
                    <div class="wenjian_tit_sty"><span style="color: #E21C20;">*</span>上传原始框架文件：</div>
                    <div class="fileNameSty" @click="delyskjCadFile">{{ yskjFileCadName }}</div>
                    <el-upload class="upload-demo" action="" :http-request="btnFileUpdate" :show-file-list="false">
                        <div class="btnSty">点击上传文件</div>
                    </el-upload>
                </div>
                <!-- --原始框架cad end -->


                <!-- --平面方案cad start -- -->
                <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 2">
                    <div class="imgNameSty">
                        <div><span style="color: #E21C20;">*</span>上传平面方案图片：</div>
                        <div class="txtSty">支持多选,最多上传8张图片</div>
                        <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                    </div>
                    <div>
                        <el-upload v-model:file-list="pmfafileList" :http-request="pmfaUpdate"
                            :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                            limit="8" :on-remove="pmfaRemoveImg">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>

                <div class="flex_str" style="margin-top: 50px;margin-bottom: 40px;" v-show="conTabId == 2">
                    <div class="wenjian_tit_sty"><span style="color: #E21C20;">*</span>上传平面方案cad文件：</div>

                    <div class="fileNameSty" @click="delCadFile">{{ pmfaFileCadName }}</div>
                    <el-upload class="upload-demo" action="" :http-request="btnFileUpdateTwo" :show-file-list="false">
                        <div class="btnSty">点击上传文件</div>
                    </el-upload>
                </div>
                <!-- --平面方案cad end -->

                <!-- --效果图 start-- -->
                <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 3">
                    <div class="imgNameSty">
                        <div><span style="color: #E21C20;">*</span>上传效果图图片或全景二维码：</div>
                        <div class="txtSty">支持多选,最多上传15张图片</div>
                        <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                    </div>
                    <div>
                        <el-upload v-model:file-list="xgtfileList" :http-request="xgtUpdate"
                            :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                            limit="15" :on-remove="xgtRemoveImg">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>
                <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 3">
                    <div style="margin-right: 30px;"><span style="color: #E21C20;">*</span>全景链接上传:</div>
                    <div>
                        <textarea class="text_area_sty" v-model="houseParams.houseFileList[2].externalLinks"></textarea>
                    </div>
                </div>
                <!-- 效果图 end -->


                <!-- 实景照片start -->
                <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 4">
                    <div class="imgNameSty">
                        <div><span style="color: #E21C20;">*</span>上传实景图片或实景二维码：</div>
                        <div class="txtSty">支持多选,最多上传25张图片</div>
                        <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                    </div>
                    <div>
                        <el-upload v-model:file-list="sjzpfileList" :http-request="sjzpUpdate" action=""
                            list-type="picture-card" :multiple="true" limit="25" :on-remove="sjzpRemoveImg">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>
                <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 4">
                    <div style="margin-right: 30px;"><span style="color: #E21C20;">*</span>实景链接上传:</div>
                    <div>
                        <textarea class="text_area_sty" v-model="houseParams.houseFileList[3].externalLinks"></textarea>
                    </div>
                </div>
                <!-- 实景照片end-->

                <!-- 材质照片start -->
                <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 5">
                    <div class="imgNameSty">
                        <div><span style="color: #E21C20;">*</span>上传量房图片：</div>
                        <div class="txtSty">支持多选,最多上传25张图片</div>
                        <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                    </div>
                    <div>
                        <el-upload v-model:file-list="czzpfileList" :http-request="czzpUpdate"
                            :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                            limit="25" :on-remove="lftpRemoveImg">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>
                <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 5">
                    <div style="margin-right: 30px;"><span style="color: #E21C20;">*</span>量房图片链接:</div>
                    <div>
                        <textarea class="text_area_sty" v-model="houseParams.houseFileList[4].externalLinks"></textarea>
                    </div>
                </div>
                <!-- 材质照片end-->


                <div>
                    <div class="flex_str">
                        <el-checkbox v-model="radioValue" size="large" />
                        <div class="foo_txt_sty">我已阅读并同意 户享邦
                            <span @click="showAgreement">《户享邦用户协议》</span>和<span @click="showIncomeExplain">《户享邦资料上传、收益说明》</span>
                        </div>
                    </div>

                    <div class="submit_btn_sty"
                        :style="radioValue ? 'background-color: #E21C20;' : 'background-color: #A19EA8;'"
                        @click="submitFun">
                        提交审核</div>
                </div>
            </div>
        </div>
        <img :src="dialogImageUrl" :title="'点击关闭'" class="currentImgSty" v-if="dialogVisible" @click="dialogVisible = false" />
        <agreementVue v-model="dialog.isShow" @close="closeAgreement"></agreementVue>
        <incomeExplainVue v-model="imcomeDialog.isShow" @close="closeIncomeExplain"></incomeExplainVue>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import cityData from '@/utils/city.json'
import { Plus } from '@element-plus/icons-vue'
import type { UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'
import { updateFileApi, updateCadApi, getMyUpdateInfoApi, getEditMyUpdateApi } from '@/api/index/index';
import { ElLoading } from 'element-plus'
import agreementVue from './agreement.vue'
import incomeExplainVue from './incomeExplain.vue'
const props = defineProps({
    isShow: {
        type: Boolean,
        defaul: false
    },
    id: {
        type: String || Number,
        default: 0
    }
})
const emit = defineEmits(['getMyUpdate'])
const { isShow, id } = toRefs(props)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

// 单选框的值
const radioValue = ref(false)
const city_address = ref<any>('')

const yskjFileCadName = ref('')
const pmfaFileCadName = ref('')
const yskjfileList = ref<UploadUserFile[]>([
])
const pmfafileList = ref<UploadUserFile[]>([
])
const xgtfileList = ref<UploadUserFile[]>([
])
const sjzpfileList = ref<UploadUserFile[]>([
])
const czzpfileList = ref<UploadUserFile[]>([
])
const city = ref<string>('陶')
const propsLabel = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'name',
    checkStrictly: true
}
const conTabId = ref(1)
const conTabList = ref([
    { id: 1, name: '原始框架cad' },
    { id: 2, name: '平面方案cad' },
    { id: 3, name: '效果图' },
    { id: 4, name: '实景照片' },
    { id: 5, name: '量房照片' },
])

const houseParams = reactive<any>({
    position: '',
    communityName: '',
    recordName: '',
    constructionArea: 0,
    buildingNo: '',
    signature: '',
    houseFileList: [
        // type: 1 参数必传
        {
            drawingIds: "",
            fileIds: "",
            type: 1,
        }, {
            drawingIds: "",
            fileIds: "",
            type: 2
        }, {
            drawingIds: "",
            externalLinks: '',
            type: 3
        }, {
            drawingIds: "",
            externalLinks: '',
            type: 4
        }, {
            drawingIds: "",
            externalLinks: '',
            type: 5
        }
    ]
})
const yskjImgNameArr = ref<any>([])
const pmfaImgNameArr = ref<any>([])
const xgtImgNameArr = ref<any>([])
const sjzpImgNameArr = ref<any>([])
const czzpImgNameArr = ref<any>([])
const handlePictureCardPreview = (uploadFile: any) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

// 原始框架图片删除
const yskjRemoveImg = (e: any) => {
    yskjImgNameArr.value = yskjImgNameArr.value.filter((item: any) => item.name != e.name)
}
const pmfaRemoveImg = (e: any) => {
    pmfaImgNameArr.value = pmfaImgNameArr.value.filter((item: any) => item.name != e.name)
}
const xgtRemoveImg = (e: any) => {
    xgtImgNameArr.value = xgtImgNameArr.value.filter((item: any) => item.name != e.name)
}
const sjzpRemoveImg = (e: any) => {
    sjzpImgNameArr.value = sjzpImgNameArr.value.filter((item: any) => item.name != e.name)
}
const lftpRemoveImg = (e: any) => {
    czzpImgNameArr.value = czzpImgNameArr.value.filter((item: any) => item.name != e.name)
}


const delCadFile = () => {
    pmfaFileCadName.value = ''
    houseParams.houseFileList[1].fileIds = ''
}
const delyskjCadFile = () => {
    yskjFileCadName.value = ''
    houseParams.houseFileList[0].fileIds = ''
}
const handleChange = (e: any) => {
    let str = ''
    e.map((v:any)=>{
        str += v
    })
    city.value = e
    houseParams.position = str
}
const conTabClick = (id: number) => {
    conTabId.value = id
}
// 原始框架图片上传
const yskjUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        yskjImgNameArr.value.push(obj)
        // houseParams.houseFileList[0].drawingIds += res.data.fileId + ','
    })
}
// 原始框架文件上传
const btnFileUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateCadApi(formData).then((res: any) => {
        loading.close()
        if (res.status == 200) {
            houseParams.houseFileList[0].fileIds = res.data.fileId
            yskjFileCadName.value = res.data.fileName
            ElMessage.success('上传成功')
        }
    })
}

// 平面方案文件上传
const btnFileUpdateTwo = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateCadApi(formData).then((res: any) => {
        loading.close()
        if (res.status == 200) {
            houseParams.houseFileList[1].fileIds = res.data.fileId
            pmfaFileCadName.value = res.data.fileName
            ElMessage.success('上传成功')
        }
    })
}

const pmfaUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        pmfaImgNameArr.value.push(obj)
    })
}
const xgtUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        xgtImgNameArr.value.push(obj)
    })
}
const sjzpUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        sjzpImgNameArr.value.push(obj)
    })
}
// 量房照片 图片上传
const czzpUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        czzpImgNameArr.value.push(obj)
    })
}

const submitFun = () => {
    let params = Object.assign({}, houseParams)
    params.houseFileList.map((v: any) => {
        v.drawingIds = ''
    })
    yskjImgNameArr.value.map((v: any) => {
        params.houseFileList[0].drawingIds += v.id + ','
    })
    pmfaImgNameArr.value.map((v: any) => {
        params.houseFileList[1].drawingIds += v.id + ','
    })
    xgtImgNameArr.value.map((v: any) => {
        params.houseFileList[2].drawingIds += v.id + ','
    })
    sjzpImgNameArr.value.map((v: any) => {
        params.houseFileList[3].drawingIds += v.id + ','
    })
    czzpImgNameArr.value.map((v: any) => {
        params.houseFileList[4].drawingIds += v.id + ','
    })
    if (params.position == '') {
        ElMessage.warning('请选择户型所在地区')
        return
    }
    if (params.communityName == '') {
        ElMessage.warning('请输入小区名称')
        return
    }
    if (params.recordName == '') {
        ElMessage.warning('请输入备案名')
        return
    }
    if (params.constructionArea == '') {
        ElMessage.warning('请输入户型面积')
        return
    }
    if (params.buildingNo == '') {
        ElMessage.warning('请输入户型楼栋号')
        return
    }

    if (radioValue.value == false) {
        ElMessage.warning('请同意户享邦协议！')
        return
    }
    if (params.houseFileList[0].drawingIds == '' || params.houseFileList[0].fileIds == '') {
        ElMessage.warning('原始框架cad信息不完整')
        return
    }
    if (params.houseFileList[1].fileIds.substr(-1) == ',') {
        params.houseFileList[1].fileIds = params.houseFileList[1].fileIds.substring(0, params.houseFileList[1].fileIds.length - 1)
    }

    params.id = id.value
    params.houseFileList.map((v: any) => {
        let str = v.drawingIds.substr(-1)
        if (str == ',') {
            v.drawingIds = v.drawingIds.substring(0, v.drawingIds.length - 1)
        }
    })
    console.log('houseParams:', params)
    getEditMyUpdateApi(params).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success('提交成功！')
            emit('getMyUpdate')
        }
    })


}
const getMyUpdateInfo = () => {
    getMyUpdateInfoApi({ id: id.value }).then((res: any) => {
        city_address.value = res.data.position
        houseParams.communityName = res.data.communityName
        houseParams.recordName = res.data.recordName
        houseParams.constructionArea = res.data.constructionArea
        houseParams.buildingNo = res.data.buildingNo
        houseParams.position = res.data.position
        res.data.houseFileList.map((v: any) => {
            if (v.type == 1) {
                houseParams.houseFileList[0].fileIds = v.fileIds
                v.fileNameList.map((v: any) => {
                    yskjFileCadName.value += v
                })
                v.drawingFiles.map((v: any) => {
                    let obj = {
                        name: v.drawingName,
                        url: v.drawingPath,
                        id: v.drawingId
                    }
                    // @ts-ignore
                    yskjfileList.value.push(obj)
                    yskjImgNameArr.value.push(obj)
                })
            } else if (v.type == 2) {
                houseParams.houseFileList[1].fileIds = v.fileIds
                v.fileNameList.map((v: any) => {
                    pmfaFileCadName.value += v
                })
                v.drawingFiles.map((v: any) => {
                    let obj = {
                        name: v.drawingName,
                        url: v.drawingPath,
                        id: v.drawingId
                    }
                    // @ts-ignore
                    pmfafileList.value.push(obj)
                    pmfaImgNameArr.value.push(obj)
                })

            } else if (v.type == 3) {
                houseParams.houseFileList[2].externalLinks = v.externalLinks
                if (res.data.houseFileList[2].hasOwnProperty('drawingFiles')) {
                    res.data.houseFileList[2].drawingFiles.map((v: any) => {
                        let obj = {
                            name: v.drawingName,
                            url: v.drawingPath,
                            id: v.drawingId
                        }
                        // @ts-ignore
                        xgtfileList.value.push(obj)
                        xgtImgNameArr.value.push(obj)
                    })
                }
            } else if (v.type == 4) {
                houseParams.houseFileList[3].externalLinks = v.externalLinks
                if (res.data.houseFileList[3].hasOwnProperty('drawingFiles')) {
                    res.data.houseFileList[3].drawingFiles.map((v: any) => {
                        let obj = {
                            name: v.drawingName,
                            url: v.drawingPath,
                            id: v.drawingId
                        }
                        // @ts-ignore
                        sjzpfileList.value.push(obj)
                        sjzpImgNameArr.value.push(obj)
                    })
                }
            } else if (v.type == 5) {
                houseParams.houseFileList[4].externalLinks = v.externalLinks
                if (res.data.houseFileList[4].hasOwnProperty('drawingFiles')) {
                    res.data.houseFileList[4].drawingFiles.map((v: any) => {
                        let obj = {
                            name: v.drawingName,
                            url: v.drawingPath,
                            id: v.drawingId
                        }
                        // @ts-ignore
                        czzpfileList.value.push(obj)
                        czzpImgNameArr.value.push(obj)
                    })
                }
            }
        })






    })
}
const closeDialog = () => {
    for (let i in houseParams) {
        if (i == 'houseFileList') {
            houseParams[i].map((itme: any) => {
                itme.drawingIds = ''
                itme.fileIds = ''
                itme.externalLinks = ''
            })
        } else {
            houseParams[i] = ''
        }
    }
    yskjFileCadName.value = ''
    pmfaFileCadName.value = ''
    yskjfileList.value = []
    pmfafileList.value = []
    xgtfileList.value = []
    sjzpfileList.value = []
    czzpfileList.value = []
    yskjImgNameArr.value = []
    pmfaImgNameArr.value = []
    xgtImgNameArr.value = []
    sjzpImgNameArr.value = []
    czzpImgNameArr.value = []

}

const dialog = reactive({
    isShow: false
})
const closeAgreement = ()=>{
    dialog.isShow = false
}
const showAgreement = ()=>{
    dialog.isShow = true
}

const imcomeDialog = reactive({
    isShow: false
})
const closeIncomeExplain = ()=>{
    imcomeDialog.isShow = false
}
const showIncomeExplain = ()=>{
    imcomeDialog.isShow = true
}
</script>
<style scoped>
.currentImgSty {
    position: fixed;
    top: 10vh;
    left: 35vw;
    width: 30vw;

}

.fileNameSty {
    font-size: 14px;
    color: #666;
}

.up_tit_sty {
    width: 80px;
}

.up_ipt_sty {
    width: 160px;
}

.text_area_sty {
    width: 450px;
    height: 120px;
}



.submit_btn_sty {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
    border-radius: 30px;
    margin-top: 30px;
}

.foo_txt_sty {
    font-size: 18px;
    margin-left: 20px;
}

.foo_txt_sty span {
    color: #E21C20;
}

.btnSty {
    padding: 6px 12px;
    background-color: #A19EA8;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    margin-left: 30px;
    margin-right: 12px;

}

.wenjian_tit_sty {
    margin-right: 30px;

}

.imgNameSty {
    width: 27%;
    margin-right: 30px;
}

.txtSty {
    font-size: 16px;
    color: #A19EA8;
    margin-top: 20px;
}


.con_tab_sty {
    border: 8px solid #f0f0f0;
    padding: 8px 0;
}

.con_tab_sty div {
    margin: 0 20px;
}

.con_tit {
    width: 100%;
}

.con_tit el-input {
    width: 360px;
}

.con_tit div {
    margin-bottom: 20px;
    margin-right: 20px;
}

.mainSty {
    width: 80%;
    margin-left: 10%;
}


.main_con_sty {
    width: 100%;
    background-color: #fff;
    padding: 10px 20px;
}</style>